Layout Slider

您所在的位置：网站首页 › Wordpress siteorigin › Layout Slider

Layout Slider

2024-01-14 21:29| 来源: 网络整理| 查看: 265

The Layout Slider Widget is best used for sliders where a layer of content is required over the background image. If you need a simpler slider with a background and foreground image or perhaps only a background image, rather use the Slider widget.

RequirementsSiteOrigin Widgets Bundle PluginOptional: Page Builder by SiteOrigin Plugin

To make use of this widget, go to PluginsSiteOrigin Widgets to activate the SiteOrigin Layout Slider Widget.

The Layout Slider Widget is ready to be used anywhere:

Page Builder: Insert widgets in Page Builder by SiteOrigin in either the Classic Editor or Page Builder Layout Block in the Block Editor. Block Editor: 100% Block Editor compatible. Insert widgets using the SiteOrigin Widgets Block featuring a live widget search form. Theme and Plugin Widget Areas: Insert widgets into any theme or plugin widget area.

Slider Frames

Click the Add link to begin adding your first slide. Click the down arrow icon to edit a slide, the page icon to edit a slide, and finally, the cross icon to delete a slide. When clicking the down arrow icon to edit, you’ll find the following settings:

Content

Click the Open Builder button to add content to the slider frame. The builder is a mini instance of Page Builder. Use the Add Row and Add Widget buttons to get started.

Layout Slider Frame Specific Animation Event The SiteOrigin Premium Block Animations addon offers an animation event for frame rows and widgets. To make use of this event, edit a Layout Slider widget, open a frame, and click the Open Builder button. Edit a row or widget, open the Animations section in the right column, and check the Animation Event drop-down. In addition to Element Enters Screen, Element In Screen, Page Load, and Hover, you’ll find a new event option labeled Slide Display. If selected, your animation will be triggered when the slide is displayed.

Background

Background image Use the Choose Media, Image Search, or External URL fields to add a background image.

Background image type Set the background image type. Choose between cover, tile or parallax. Parallax is added by the Parallax Addon in SiteOrigin Premium.

Background image opacity and background color Use these settings to insert an overlay on your background image. For example, if you set your background color to black and set the opacity to 80, your background image will be darkened. This effect is used to make the content that appears on top of the background image, easier to read. It’s also a nice way to standardize a series of images.

Destination URL If you’d like to link the slide, enter a destination URL, or use the Select Content button to do so.

Open in new window Enable to open the above link in a new window.

Background videos

Use this section to add a background video to your slide frame. Click the Add link to begin adding your first video. Click the down arrow icon to edit a video, the page icon to edit a video, and finally, the cross icon to delete a video. When clicking the down arrow icon to edit, you’ll find the below settings. Please note that only one background video is suitable. If you’d like to add more than one background video format, this can be done using the Add link.

Video file Select the video file from your media library or upload a video.

Video URL Optionally enter the URL of an externally hosted video.

Autoplay Enable to autoplay the background video, currently only for YouTube videos.

Video format Use the drop-down menu to select the video format being used.

Loop slide background videos Enable to loop the slide background videos.

Background video opacity Set the slide background video opacity.

Slider Controls

Autoplay Change slides automatically without user interaction.

Autoplay pause on hover If autoplay is enabled, pause the slider on hover.

Animation speed Slider animation speed in milliseconds.

Timeout How long each frame is displayed in milliseconds.

Navigation color Select the slider navigation color. The navigation refers to the left-right arrows and dots at the bottom right, representing each slide.

Navigation style Choose from the following options:

Ultra thinThinMediumThickRounded ultra thinRounded thinRounded mediumRounded thick

Navigation size Sets the size of the navigation arrows only.

Always show navigation on desktop Navigation is normally displayed on hover. Enable to always show the slider navigation on desktop devices.

Always show navigation on mobile Navigation is normally displayed on hover. Enable to always show the slider navigation on mobile devices.

Swipe Control Allow users to swipe through frames on mobile devices.

Unmute icon Slide background videos are muted. Enable to display an unmute/mute icon. Only applies to self-hosted videos.

Unmute icon position This setting will be displayed if the Unmute icon setting is enabled. Select the Unmute icon position. Choose between Top right, Bottom right, Bottom left, or Top left.

Show slide background videos on mobile Allow slide background videos to appear on mobile devices that support autoplay.

LayoutDesktop

The layout settings section for desktop devices.

Height Optionally enter a height for the Layout Slider.

Top and bottom padding Enter a top and bottom padding for the slider. This can be used to position content.

Extra top padding Use this setting to add extra padding to the top of the slider.

Side padding Use this setting to set the right and left side padding.

Maximum container width Set the content maximum container width. This applies to the width of the content area within the slider and not the background image. Perfect for controlling the size of each slide’s content.

Mobile

The layout settings section for mobile devices.

Height Optionally enter a height for the Layout Slider.

Top and bottom padding Enter a top and bottom padding for the slider. This can be used to position content.

Extra top padding Use this setting to add extra padding to the top of the slider.

Side padding Use this setting to set the right and left side padding.

Vertically center align slide contents For perfect centering, consider setting the Extra top padding setting to 0 when enabling this setting.

Navigation Shortcode

View a demo of the navigation shortcode in use.

Download the demo JSON layout.

Unzip after downloading. JSON layouts can be imported in Page Builder via LayoutsImport/ExportSelect Import File.

The Layout Slider offers a navigation shortcode, [slide_control]. The shortcode can be inserted into each slide as required and offers the following options:

label: Optional label to use as navigation text.slide: Which slide to navigate to. Options are:firstlastprevpreviousnextA numerical slide number, e.g: 3

The slide number is not zero-based. Linking to slide 3 will take the user to the third slide.

Example shortcode:

[slide_control slide="3"] Using the Shortcode in a Button Widget

It’s possible to indirectly apply the slide control shortcode in a SiteOrigin Button widget within the Layout Slider. The following Button widget fields are required:

Button text Insert button text as required. For example “Show Slide 1”.

Destination URL Enter a hash followed by the slide number you’d like to navigate to. For example, to navigate to the first slide, insert #1.

Button classes Open the Other attributes and SEO section to locate the Button classes field. Insert the following class name:

sow-slide-control

Custom CSS Customizations

CSS rules can be inserted at AppearanceCustom CSS if you’re using SiteOrigin CSS or CustomizeAdditional CSS.

Navigation on Desktop and Mobile

.sow-slide-nav[style], .sow-slider-base .sow-slider-pagination[style] { display: block !important; }

Center Pagination

.sow-slider-base .sow-slider-pagination { text-align: center; } Advanced Customizations

Change to a Specific Slide Using a Text Link

View a demo of this advanced customization.

Download the demo JSON layout. advanced-layout-slider-customizations

Unzip after downloading. JSON layouts can be imported in Page Builder via LayoutsImport/ExportSelect Import File.

This customization allows for a text link to be inserted into one of your SiteOrigin Layout Slider frames (slides). When clicked, the link will change the Layout Slider to the chosen slide.

* We’ll be using the terms frame and slide interchangeably. “slides” are labeled “frames” in the Layout Slider widget.

In this example, we’ll use a Layout Slider with three slides. In each slide, we’ll insert a text link that links to the next slide.

Somewhere on your page, the following script should be inserted. One option is to use a Custom HTML widget above or below the Layout Slider. Other options include using a Header and Footer scripts plugin to insert the script in the header or footer of your chosen page. You could also use a plugin like Code Snippets or a child theme if you have experience with PHP conditional statements, and using WordPress hooks.

jQuery( function( $ ) { $( '.direct-2' ).on( 'click', function( event ) { event.preventDefault(); $( '.sow-slider-images' ).cycle( 1 ); } ); $( '.direct-3' ).on( 'click', function( event ) { event.preventDefault(); $( '.sow-slider-images' ).cycle( 2 ); } ); $( '.direct-1' ).on( 'click', function( event ) { event.preventDefault(); $( '.sow-slider-images' ).cycle( 0 ); } ); } );

$( '.sow-slider-images' ).cycle( 1 ); is used to select the slide that the text link with class name direct-2 will go to. The index is zero-based so the 1 you see above will take the user to the 2nd slide.

Next, edit the first slide and insert the following text link using a Custom HTML, Text, or SiteOrigin Editor widget.